<template>
  <div class="subtle-background">
    <!-- 静态网格背景 -->
    <div class="grid-background"></div>
    
    <!-- 微妙的渐变光效 -->
    <div class="gradient-overlay"></div>
    
    <!-- 缓慢移动的光点 -->
    <div class="light-dots">
      <div 
        v-for="i in 8" 
        :key="i" 
        class="light-dot"
        :style="getDotStyle(i)"
      ></div>
    </div>
    
    <!-- 内容插槽 -->
    <div class="content-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 生成光点样式
const getDotStyle = (index: number) => {
  const positions = [
    { left: '10%', top: '20%', delay: '0s' },
    { left: '85%', top: '15%', delay: '2s' },
    { left: '20%', top: '80%', delay: '4s' },
    { left: '75%', top: '70%', delay: '6s' },
    { left: '45%', top: '25%', delay: '8s' },
    { left: '60%', top: '85%', delay: '10s' },
    { left: '15%', top: '50%', delay: '12s' },
    { left: '90%', top: '45%', delay: '14s' }
  ]
  
  const pos = positions[index - 1]
  return {
    left: pos.left,
    top: pos.top,
    animationDelay: pos.delay
  }
}
</script>

<style scoped>
.subtle-background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 静态网格背景 */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(100, 200, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 200, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
}

/* 微妙的渐变光效 */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(100, 200, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(100, 200, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(100, 200, 255, 0.01) 0%, transparent 70%);
  z-index: 2;
}

/* 缓慢移动的光点 */
.light-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.light-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(100, 200, 255, 0.4);
  border-radius: 50%;
  box-shadow: 
    0 0 6px rgba(100, 200, 255, 0.3),
    0 0 12px rgba(100, 200, 255, 0.2);
  animation: subtlePulse 8s ease-in-out infinite;
}

/* 内容包装器 */
.content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* 微妙的脉动动画 */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* 确保背景不会影响交互 */
.grid-background,
.gradient-overlay,
.light-dots {
  pointer-events: none;
}
</style>
